<template>
  <div class="detail">
    <p class="d_p">商品详情</p>
    <div class="dis">
      <p>商品名称：</p>
      <div contenteditable="true">{{detail.name}}</div>
    </div>
    <div class="dis">
      <p>商品描述：</p>
      <div>{{detail.subtitle}}</div>
    </div>
    <div class="dis">
      <p>当前状态：</p>
      <div>{{detail.status}}</div>
    </div>
    <div class="dis">
      <p>所属分类：</p>
      <select placeholder="请选择">
        <option value>请选择一级品类</option>
        <option v-for="item in options" :key="item.value">{{item.label}}</option>
      </select>
    </div>
    <div class="dis">
      <p>商品价格：</p>
      <div>
        {{detail.price}}
        <p>元</p>
      </div>
    </div>
    <div class="dis">
      <p>商品库存：</p>
      <div>
        {{detail.stock}}
        <p>件</p>
      </div>
    </div>
    <div class="dis_img">
      <p>商品图片：</p>
      <div class="img">
        <img :src="detail.imageHost+`${detail.mainImage}`" width="100%" />
      </div>
    </div>
    <div class="dis">
      <p>商品详情：</p>
      <span v-html="detail.detail"></span>
    </div>
  </div>
</template>

<script>
import { Detail } from "../../request/http";
export default {
  data() {
    return {
      detail: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  mounted() {
    let id = this.$route.query.id;
    console.log(id);
    var obj = {
      productId: id,
    };
    Detail(obj).then((res) => {
      console.log(res.data.data);
      this.detail = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/index.scss";
.d_p {
  @include FontOnly(40px);
  @include Mlt(30px, 30px);
}
.dis_img {
  @include Mlt(100px, 10px);
  display: flex;
  p {
    @include FontOnly(13px);
    margin-right: 30px;
  }
  .img {
    @include Size(120px, 120px);
    border: 1px solid #000;
    background-color: #fff;
    border-radius: 5px;
  }
}
.dis {
  @include Size(100%, 35px);
  @include Mlt(100px, 10px);
  display: flex;
  line-height: 30px;
  cursor: pointer;
  p {
    @include FontOnly(13px);
    margin-right: 30px;
  }
  div {
    @include Size(50%, 30px);
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    text-indent: 10px;
    position: relative;
    p {
      @include Size(1%, 30px);
      position: absolute;
      right: 0;
      top: 0;
      border-left: 1px solid #999;
    }
  }
}
.el-input {
  width: 50%;
}
.dis>p:nth-child(1){
  font-weight: 700;
}
</style>